<template>
  <div class="percent-root" :style="{filter: `hue-rotate(${Math.round(Math.random()*360)}deg)`}">
    <div class="bar">
      <div class="fill" :style="{width: `${num * .8}%`}"></div>
      <div class="text">{{label}}</div>
    </div>
    <div class="ball" :style="{left: `calc(${num <= 4 ? 3.2 : num*.8}% - 28px)`}">{{num}}%</div>
  </div>
</template>

<script>
export default {
  name: 'percent-root',
  props: ['label', 'num']
}
</script>

<style lang="stylus" scoped>
.percent-root
  height 56px
  position relative
  box-sizing border-box
  padding-top 8px
  >.bar
    background black
    height 38px
    border 1px solid hsl(0, 90%, 55%)
    border-radius 20px
    overflow hidden
    >.fill
      float left
      height 100%
      background hsl(0, 90%, 55%)
    >.text
      line-height @height
      float right
      margin-right 32px
  >.ball
    height @height
    width @height
    background hsl(0, 90%, 45%)
    position absolute
    top 0
    border-radius 50%
    text-align center
    line-height @height
    color black


</style>